<template>
  <view class="container mx-auto px-4 py-6 bg-gray-50 min-h-screen">
    <!-- 订单信息卡片 -->
    <view class="bg-white p-6 mb-6">
      <view class="flex justify-between items-start mb-4">
        <text class="text-lg font-bold text-gray-800">评估报价</text>
        <!-- <text class="flex-1 ml-4">{{ formatDate(evaluatetime) }}</text> -->
      </view>

      <view class="mb-4">
        <input
          class="flex-1 border-box bg-[#eee] p-2 rounded-sm"
          v-model="amount"
          type="number"
          placeholder="请输入报价金额"
        />
      </view>
    </view>

    <!-- 评分区域 -->
    <!-- <view class="bg-white rounded-xl shadow-md p-6 mb-6 transform transition-all hover:shadow-lg">
      <text class="block text-lg font-bold text-gray-800 mb-4">服务评分</text>
      
      <view class="mb-6">
        <text class="block text-gray-700 mb-3">整体满意度</text>
        <view class="flex space-x-2">
            <nut-rate :spacing="spacing"  v-model="rating" />
        </view>
        <text class="text-sm text-gray-500 mt-2">当前评分: {{ rating }}星</text>
      </view>
      
      <view class="mb-6">
        <text class="block text-gray-700 mb-3">服务质量</text>
        <view class="flex space-x-2">
            <nut-rate :spacing="spacing"  v-model="serviceQuality" />
        </view>
        <text class="text-sm text-gray-500 mt-2">当前评分: {{ serviceQuality }}星</text>
      </view>
      
      <view class="mb-6">
        <text class="block text-gray-700 mb-3">交付速度</text>
        <view class="flex space-x-2">
            <nut-rate :spacing="spacing"  v-model="deliverySpeed" />
        </view>
        <text class="text-sm text-gray-500 mt-2">当前评分: {{ deliverySpeed }}星</text>
      </view>
    </view> -->

    <!-- 评价内容 -->
    <view class="bg-white p-6 mb-6">
      <text class="block text-lg font-bold text-gray-800 mb-4">备注信息</text>

      <view class="mb-4">
        <textarea
          v-model="remark"
          placeholder="请输入备注信息"
          class="w-full p-3 border-box bg-[#eee] border border-gray-300 rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300 resize-none"
          rows="4"
        ></textarea>
        <text class="text-sm text-gray-500 float-right"
          >{{ remark.length }}/500</text
        >
      </view>

      <!-- <view class="mb-4">
        <text class="block text-gray-700 mb-2">上传图片 (最多3张)</text>
        <view class="flex flex-wrap gap-3">
          <view 
            v-for="(image, index) in uploadedImages" 
            :key="index" 
            class="relative w-20 h-20 rounded-lg overflow-hidden"
          >
            <image 
              :src="image" 
              class="w-full h-full object-cover"
              mode="aspectFill"
              alt="上传的评价图片"
            />
            <view class="absolute top-0 right-0 bg-red-500 text-white w-5 h-5 flex items-center justify-center rounded-full cursor-pointer" @click="removeImage(index)">
              <text class="text-xs">×</text>
            </view>
          </view>
          
          <view 
            v-if="uploadedImages.length < 3" 
            class="w-20 h-20 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center cursor-pointer hover:border-blue-500 transition duration-300"
            @click="chooseImage"
          >
            <text class="text-gray-400">+</text>
          </view>
        </view>
      </view> -->
    </view>

    <!-- 提交按钮 -->
    <view class="flex justify-center">
      <nut-button
        class="!w-[200rpx]"
        type="primary"
        :disabled="!isFormValid"
        @click="submitEvaluation"
      >
        提交
      </nut-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";
import http from "@/utils/http";
import Taro from "@tarojs/taro";
import { Rate } from "@nutui/nutui-taro";
import { formatTimestamp } from "@/utils/tooler";

const params = Taro.getCurrentInstance().router?.params;

const spacing = ref(8);
const amount = ref(0);
const remark = ref("");

// 表单数据
const rating = ref(5);
const serviceQuality = ref(5);
const deliverySpeed = ref(5);
const uploadedImages = ref<string[]>([]);
const submitting = ref(false);

// 表单验证
const isFormValid = computed(() => amount.value > 0);

// 选择图片
const chooseImage = () => {
  Taro.chooseImage({
    count: 3 - uploadedImages.value.length,
    success: (res) => {
      uploadedImages.value = [...uploadedImages.value, ...res.tempFilePaths];
    },
  });
};

// 移除图片
const removeImage = (index: number) => {
  uploadedImages.value.splice(index, 1);
};

// 提交评价
const submitEvaluation = () => {
  if (!isFormValid.value || submitting.value) return;

  submitting.value = true;

  // 准备提交数据
  const evaluationData = {
    orderno: params?.orderno || "",
    amount: Number(amount.value),
    remark: remark.value,
    evaluatetime: formatTimestamp(Date.now()),
  };

  // 模拟提交过程
  setTimeout(() => {
    Taro.showToast({
      title: "提交中...",
      mask: true,
    });
    http
      .post("/index.php/index/api/index", {
        Func: "evaluate",
        data: evaluationData,
      })
      .then((res) => {
        if (res.error == 0) {
          Taro.showToast({
            title: "评价提交成功",
            icon: "success",
            duration: 2000,
          });

          // 延迟后返回上一页
          setTimeout(() => {
            Taro.navigateBack({
              delta: 2
            });
          }, 2000);
        } else {
          Taro.showToast({
            title: res.msg || "提交失败，请重试",
            icon: "none",
            duration: 2000,
          });
        }
      })
      .catch((err) => {
        console.error("提交评价失败:", err);
        Taro.showToast({
          title: "网络错误，请稍后重试",
          icon: "none",
          duration: 2000,
        });
      })
      .finally(() => {
        submitting.value = false;
      });
  }, 1000); // 模拟网络延迟
};

// 页面加载时的初始化
onMounted(() => {
  // 可以在这里添加页面初始化逻辑
});
</script>

<style lang="scss">
/* 评分星星组件样式 */
.rating-star {
  display: flex;
  align-items: center;
}

.rating-star-item {
  cursor: pointer;
  transition: transform 0.2s;
}

.rating-star-item:hover {
  transform: scale(1.1);
}
.container {
  textarea {
    box-sizing: border-box;
  }
}
</style>
